<template>
  <div class="app-container">
    <div class="main-content">
      <!-- 路由视图，用于渲染不同的组件 -->
      <router-view></router-view>
    </div>

    <!-- 商品列表区域 -->
    <div class="content">
      <table class="book-table">
        <thead>
          <tr>
            <th>封面</th>
            <th>ID</th>
            <th>书名</th>
            <th>价格</th>
            <th>作者</th>
            <th>出版社</th>
            <th>库存</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in paginatedData" :key="index">
            <td><img :src="item.image" class="book-item-img"></td>
            <td>{{ item.id }}</td>
            <td>{{ item.title }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.author }}</td>
            <td>{{ item.publish }}</td>
            <td>{{ item.count }}</td>
            <td>
              <div v-if="item.count > 0">
                <button style="background-color: #e74c3c; color: white;" @click="add(item)" class="add-button">下架</button>
              </div>
              <div v-else>
                <button style="background-color: #bdc3c7; color: white;" disabled class="add-button">缺货</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- 分页导航 -->
      <div class="pagination">
        <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
        <span>{{ currentPage }} / {{ totalPages }}</span>
        <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

// 定义响应式数据
const dataList = ref([]);
const filteredDataList = ref([]);
const currentPage = ref(1);
const itemsPerPage = ref(5);

// 定义方法
const fetchBooks = async () => {
  try {
    const response = await axios.get("http://localhost:3000/books");
    dataList.value = response.data;
    filteredDataList.value = response.data;
  } catch (error) {
    console.error('数据加载失败:', error);
  }
};

const add = (item) => {
  // 这里可以添加实际的加入购物车逻辑，由于去除购物车功能，暂时留空
  console.log(`尝试加入商品：${item.title}`);
};



const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

// 计算属性
const paginatedData = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage.value;
  const endIndex = startIndex + itemsPerPage.value;
  return filteredDataList.value.slice(startIndex, endIndex);
});

const totalPages = computed(() => {
  return Math.ceil(filteredDataList.value.length / itemsPerPage.value);
});

// 生命周期钩子
onMounted(() => {
  fetchBooks();
});
</script>

<style scoped>
.app-container {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  padding: 20px;
}

.search-and-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-container {
  margin: 0;
}

.search-input {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 300px;
  font-size: 15px;
  margin-right: 10px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}

.search-button {
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  background-color: #007bff;
  color: white;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-button:hover {
  background-color: #0056b3;
}

.content {
  width: 100%;
}

.book-table {
  width: 100%;
  border-collapse: collapse;
}

.book-table th,
.book-table td {
  border: 1px solid #f0f0f0;
  padding: 15px;
  text-align: left;
}

.book-item-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.add-button {
  padding: 8px 16px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination button {
  padding: 8px 16px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin: 0 5px;
}

.pagination button:disabled {
  background-color: #bdc3c7;
  color: white;
  cursor: not-allowed;
}
</style>